<template>
    <div class="headmenu">
        <div class="h2">
            <div class="item"><a href="https://zhyq.ailuquan.cn/website/shijzslqqzf">首页</a></div>
            <div class="item">
                政策服务
                <div class="d1">
                    <div class="sub">
                        <a href="https://zhyq.ailuquan.cn/website/shijzslqqzf/policy?ti=1">政策清单</a>
                        <a href="https://zhyq.ailuquan.cn/website/shijzslqqzf/policy?ti=2">政策触达</a>
                        <a href="https://zhyq.ailuquan.cn/website/shijzslqqzf/my/myEnjoyApplication">免申即享</a>
                    </div>
                </div>
            </div>
            <div class="item">
                人才服务
                <div class="d1">
                    <div class="sub">
                        <a>人才招聘</a>
                        <a>人才服务</a>
                    </div>
                </div>
            </div>
            <div class="item">
                招商地图
                <div class="d1">
                    <div class="sub">
                        <a target="_blank" href="https://zhyq.ailuquan.cn/website/investmentMap/traffic">交通区位</a>
                        <a target="_blank" href="https://zhyq.ailuquan.cn/website/investmentMap/industry">产业发展</a>
                        <a target="_blank" href="https://zhyq.ailuquan.cn/website/investmentMap/industryArea">招商区块</a>
                        <a target="_blank" href="https://zhyq.ailuquan.cn/website/investmentMap/carrier">招商载体</a>
                        <a target="_blank" href="https://zhyq.ailuquan.cn/website/shijzslqqzf/policy/policyListInvestment?pt=8">招商政策</a>
                    </div>
                </div>
            </div>
            <div class="item"><a target="_blank" href="https://zhyq.ailuquan.cn/website/investmentMap/VRDisplay">VR展示</a></div>
            <div class="item">
                专业服务
                <div class="d1">
                    <div class="sub">
                        <a>金融服务</a>
                        <a>企业填报</a>
                        <a>培训服务</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance,reactive } from 'vue'
let { proxy } = getCurrentInstance()
const props = defineProps({
})
let obj = reactive({
})
</script>

<style lang="scss" scoped>
    .headmenu {
        height:51px; background-color: #1f71e0; border-bottom: 2px solid #0a4db2; box-shadow: 0 6px 9px 0 rgb(8 1 3 / 16%); transition: all .2s;
        .h2 {
            max-width: 1200px; min-width: 1200px; width: 100%; height:51px; box-sizing: border-box; display:flex; margin:0 auto;
            a { color:#FFFFFF; }
            .item {
                color: #FFFFFF; font-size:18px; flex: 1; text-align: center; line-height: 51px; cursor: pointer; position: relative;
                .d1 { padding-top:8px;
                    .sub {
                        display:none; position:relative; background:#1f71e0; border-radius:3px; z-index:100;
                        a { display: block; color:#FFFFFF; height:45px; line-height:45px; text-align:left; padding-left: 15px; font-size:15px; opacity: .7; }
                        a:hover { opacity: 1; } 
                    }
                }
            }
            .item:hover { 
                background:#3586f4;
                .sub { display: block; }
            }
        }
    }
</style>